<template>
  <div class="city">
    <div class="header" @click="myinfo">
      <van-icon class="left" name="arrow-left" />
      <span>添加地址</span>
      <button>保存</button>
    </div>
    <div class="item_box d-flex a-center" @click="areaPop = true">
      <span>所属区域</span>
      <input
        type="text"
        v-model="buyInfo.address"
        placeholder="请选择所属区域"
        readonly="readonly"
      />
      <div class="iconbox">
        <van-icon name="arrow" color="#bbbbbb" />
      </div>
    </div>

    <!-- 选择地区 -->
    <van-popup v-model="areaPop" position="bottom">
      <van-area
        :area-list="areaList"
        @confirm="changeArea"
        @cancel="areaPop = false"
        value="320000"
      />
    </van-popup>
  </div>
</template>

<script>
  import { areaList } from '@vant/area-data';
  export default {
    name: "Buy",
    props: {},
    data() {
      return {
        areaList: areaList,
        areaPop: false,
        yearList: [],
        buyInfo: {
          address: "",
          province: "", //省
          city: "", //市,
          area: "", //区
          detailAddress: "",
        },
      };
    },
    methods: {
      myinfo() {
        this.$router.push("/myinfo")
      },
      changeArea(values) {
        this.buyInfo.province = values[0].name;
        this.buyInfo.city = values[1].name;
        this.buyInfo.area = values[2].name;
        this.buyInfo.address = values
          .filter((item) => !!item)
          .map((item) => item.name)
          .join("/");
        this.areaPop = false;
      },
    },
  }
</script>

<style lang="scss" scoped>
  .header {
    height: 9vmin;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 5vmin;
    color: #000;

    button {
      border: none;
      color: gray;
      margin-right: 5px;
    }
  }

  .item_box { 
    font-size: 18px;
    display: float;
    height: 10vmin;

    span {
      margin: 0 2vmin;
    }

    input {
      height: 6vmin;
      margin: 0 2vmin;
      border: none;
    }

    .iconbox {
      width: 2vmin;
      float: right;
      margin-right: 4vmin;
      vertical-align: middle;
    }
  }
</style>